<template>
  <div class="app-container">
    <el-container>
      <!-- middle -->
      <el-container>
        <!-- main -->
        <el-container>
          <el-main class="main">
            <div>
              <!-- search -->
              <div>
                <el-form inline :model="formInline" class="demo-form-inline">
                  <!-- 设备号 -->
                  <el-form-item label="设备号">
                    <el-input
                      v-model="formInline.deviceNumber"
                      size="small"
                      placeholder="请输入设备号"
                    ></el-input>
                  </el-form-item>
                  <!-- 卡组 -->
                  <el-form-item label="选择卡组">
                    <el-select
                      v-model="formInline.cardGroup"
                      size="small"
                      placeholder="请选择卡组"
                    >
                      <el-option label="区域一" value="shanghai"></el-option>
                      <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                  </el-form-item>
                  <!-- searchButton -->
                  <el-form-item>
                    <el-button type="primary" size="small" icon="el-icon-search"
                      >搜索</el-button
                    >
                  </el-form-item>
                </el-form>
              </div>
              <!-- selectDeviceTable -->
              <div>
                <div>
                  <el-table
                    ref="multipleTable"
                    :data="tableData"
                    tooltip-effect="dark"
                    border
                    style="width: 100%"
                  >
                    <!-- 设备号 -->
                    <el-table-column label="设备号" align="center">
                      <template slot-scope="scope">{{
                        scope.row.date
                      }}</template>
                    </el-table-column>
                    <!-- 设备名称 -->
                    <el-table-column
                      prop="deviceName"
                      label="设备名称"
                      align="center"
                    ></el-table-column>
                    <!-- 状态 -->
                    <el-table-column
                      prop="statu"
                      label="状态"
                      align="center"
                    ></el-table-column>
                    <!-- 所属卡组 -->
                    <el-table-column
                      prop="selectCard"
                      label="所属卡组"
                    ></el-table-column>
                    <!-- 操作 -->
                    <el-table-column label="操作">
                      <el-checkbox></el-checkbox>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </div>
          </el-main>
        </el-container>
      </el-container>
      <!-- footer -->
      <el-footer class="foolter">
        <div class="pt1">
          <el-button type="primary" @click="drawer = true">确定</el-button>
        </div>
      </el-footer>
    </el-container>
    <!-- Drawer_设备绑定数据信息 -->
    <el-drawer
      style="text-align:center;background-color: #000"
      title="设备绑定数据信息"
      size="50%"
      :visible.sync="drawer"
      direction="ttb"
      :before-close="handleClose"
    >
      <div class="deviceData">
        <!-- saveTable -->
        <div class="saveTable">
          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            border
            style="width: 80%;margin:0 auto"
          >
            <!-- 设备号 -->
            <el-table-column label="设备号" align="center">
              <template slot-scope="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <!-- 设备名称 -->
            <el-table-column
              prop="deviceName"
              label="设备名称"
              align="center"
            ></el-table-column>
            <!-- 站台序号 -->
            <el-table-column
              prop="statu"
              label="站台序号"
              align="center"
            ></el-table-column>
            <!-- 站台名称 -->
            <el-table-column
              prop="selectCard"
              label="站台名称"
            ></el-table-column>
            <!-- 线路序号 -->
            <el-table-column label="线路序号"></el-table-column>
            <!-- 线路名称 -->
            <el-table-column label="线路名称"></el-table-column>
          </el-table>
        </div>
        <div class="ft">
          <el-button type="primary">保存</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import Treeselect from '@riophae/vue-treeselect' // 导入树形控件组件
import '@riophae/vue-treeselect/dist/vue-treeselect.css' // 导入树形控件样式
export default {
  components: { Treeselect },
  data () {
    return {
      value: [], // 树形控件数据
      drawer: false, // 显示抽屉的状态
      formInline: {
        deviceNumber: '', // 设备号
        cardGroup: '' // 卡组
      },
      tableData: [
        // tableData
        {
          date: '210402Tc8888',
          deviceName: '320*128',
          statu: '在线',
          selectCard: '20路'
        },
        {
          date: '210402Tc8888',
          deviceName: '320*128',
          statu: '在线',
          selectCard: '20路'
        },
        {
          date: '210402Tc8888',
          deviceName: '320*128',
          statu: '在线',
          selectCard: '20路'
        }
      ],
      deptOptions: undefined, // 公交站台树形控件数据
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    // 筛选节点
    filterNode (value, data) {
      console.log(value, data)
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    // 节点单击获得相应的数据
    handleNodeClick (data) {
      console.log(data)
    },
    // 点击确定显示保存表格
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    }
  },
  created () {
  },
  watch: {
    // 根据名称筛选部门树
    deptName (val) {
      console.log(val)
      this.$refs.tree.filter(val)
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container {
  .header {
    // background-color: #b3c0d1;
  }
  .aside {
    background-color: #fff;
  }
  .main {
    background-color: #e9eef3;
  }
  .foolter {
    text-align: center;
    .pt1 {
      padding-top: 20px;
    }
  }
  .deviceData {
    margin: 0 auto;
    .ft {
      text-align: center;
      margin-top: 10px;
    }
  }
}
</style>
